<!-- //综合信息 -->
<template>
  <div class="com-container">
    <dv-scroll-board
      class="dv-scr-board"
      :config="config"
      @click="clickRow($event)"
    />
    <el-dialog title="数据信息" :visible.sync="dialogVisible">
      <el-descriptions title="">
        <el-descriptions-item label="输电">{{
          this.data.shu
        }}</el-descriptions-item>
        <el-descriptions-item label="变电">{{
          this.data.bian
        }}</el-descriptions-item>
        <el-descriptions-item label="时间">
          {{ this.data.time }}</el-descriptions-item
        >
        <el-descriptions-item label="送电">{{
          this.data.song
        }}</el-descriptions-item>
        <el-descriptions-item label="停电"
          >{{ this.data.ting }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template><script>
export default {
  data() {
    return {
      allData: null, //服务器返回的数据
      config: {},
      data: {}, //渲染的数据
      dialogVisible: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取服务器数据
    async getData() {
      const res = await this.$http.get("/sbst/sbst");
      this.allData = res.data;
      // console.log(this.allData);
      this.config = {
        header: ["时间", "操作"],
        data: this.allData.map((item) => [item.time, "查看"]),
        rowNum: 9, //表格行数
        headerHeight: 50,
        indexHeader: "序号",
        headerBGC: "RGBA(38, 45, 56,0.3)", //表头
        oddRowBGC: "RGBA(38, 45, 56,0.5)", //奇数行
        evenRowBGC: "RGBA(38, 45, 56,0.3)", //偶数行
        index: true,
        columnWidth: [70, 120, 50],
        align: ["center"],
      };
      // console.log(this.config.data);
    },

    //点击表格行
    clickRow(row) {
      this.data = this.allData[row.rowIndex];
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  background: rgba(22, 31, 38, 0.5) !important;
}
/deep/ .el-dialog__title {
  color: #fff;
}
/deep/ .el-dialog__body {
  color: #fff;
}
/deep/.el-descriptions__body {
  color: #fff;
  background: rgba(0, 0, 0, 0) !important;
}
</style>
